<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>个人信息页面</title>
    <link rel="stylesheet" href="style_layout.css">
</head>

<body>
    <div class="container">
        <!-- 左侧区域 -->
        <div class="left-area">
            <h1>赵六</h1>

            <h2>联系方式</h2>
            <p>手机：123-0000-0000</p>
            <p>邮箱：zhaoliu@example.com</p>

            <h2>个人优势</h2>
            <ul>
                <li>快速学习</li>
                <li>团队协作</li>
                <li>代码规范</li>
            </ul>

            <h2>职业步骤</h2>
            <ol>
                <li>掌握 HTML</li>
                <li>掌握 CSS</li>
                <li>掌握 JS</li>
            </ol>

            <h2>个人词条</h2>
            <p><strong>HTML</strong>：超文本标记语言</p>
            <p><strong>CSS</strong>：层叠样式表</p>

            <h2>技能树</h2>
            <ul>
                <li>前端
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                    </ul>
                </li>
                <li>后端
                    <ul>
                        <li>Node.js</li>
                    </ul>
                </li>
            </ul>
        </div>

        <!-- 中间区域 -->
        <div class="middle-area">
            <h2>教育经历</h2>
            <table>
                <tr>
                    <th>时间</th>
                    <th>学校</th>
                    <th>专业</th>
                </tr>
                <tr>
                    <td>2016 - 2020</td>
                    <td>北京大学</td>
                    <td>计算机</td>
                </tr>
                <tr>
                    <td>2020 - 2023</td>
                    <td>清华大学</td>
                    <td>软件工程</td>
                </tr>
            </table>

            <h2>在线编辑</h2>
            <form>
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name" placeholder="Your name"><br><br>
                <label for="age">年龄：</label>
                <input type="text" id="age" name="age"><br><br>
                <label for="email">邮箱：</label>
                <input type="text" id="email" name="email"><br><br>
                <label for="phone">电话：</label>
                <input type="text" id="phone" name="phone"><br><br>
                <label for="homepage">主页：</label>
                <input type="text" id="homepage" name="homepage"><br><br>
                <label for="password">密码：</label>
                <input type="password" id="password" name="password"><br><br>
                <label for="date">日期：</label>
                <input type="date" id="date" name="date"><br><br>
                <label for="time">时间：</label>
                <input type="time" id="time" name="time"><br><br>
                <label for="month">月份：</label>
                <input type="month" id="month" name="month"><br><br>
                <label for="week">周：</label>
                <input type="week" id="week" name="week"><br><br>
                <label for="range">范围0 - 100：</label>
                <input type="range" id="range" name="range" min="0" max="100"><br><br>
                <label for="file">文件：</label>
                <input type="file" id="file" name="file"><br><br>
                <label for="color">颜色：</label>
                <input type="color" id="color" name="color"><br><br>
            </form>
        </div>

        <!-- 右侧区域 -->
        <div class="right-area">
            <h2>选择</h2>
            <p>性别：
                <input type="radio" id="male" name="gender" value="male">
                <label for="male">男</label>
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">女</label>
            </p>
            <p>技能：
                <input type="checkbox" id="HTML" name="skill" value="HTML">
                <label for="HTML">HTML</label>
                <input type="checkbox" id="CSS" name="skill" value="CSS">
                <label for="CSS">CSS</label>
                <input type="checkbox" id="JS" name="skill" value="JS">
                <label for="JS">JS</label>
            </p>
            <p>下拉选择：
                <select name="singleSelect">
                    <option value="option1">选项1</option>
                    <option value="option2">选项2</option>
                    <option value="option3">选项3</option>
                </select>
            </p>
            <p>多选项：
                <select name="multiSelect" multiple>
                    <option value="optionA">选项A</option>
                    <option value="optionB">选项B</option>
                    <option value="optionC">选项C</option>
                </select>
            </p>

            <h2>自我介绍</h2>
            <textarea name="selfIntro" rows="5" cols="30" placeholder="说说自己..."></textarea>

            <h2>操作</h2>
            <button>提交</button>
            <button>重置</button>
            <button>删除记录</button><br><br>
            <p>隐藏域：<input type="hidden" name="hiddenField" value="hiddenValue"></p>
            <p>只读：<input type="text" name="readOnly" value="不可改" readonly></p>
            <p>禁用：<input type="text" name="disabled" value="不可用" disabled></p>

            <h2>自动补全</h2>
            <input type="text" list="autoList" name="autoComplete">
            <datalist id="autoList">
                <option value="选项1">
                <option value="选项2">
                <option value="选项3">
            </datalist>

            <h2>进度/度量</h2>
            <p>加载：<progress value="30" max="100"></progress></p>
            <p>分数：<meter value="75" min="0" max="100"></meter></p>
        </div>
    </div>
</body>

</html>